<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="8" v-for="item in reviewList" :key="item.articleId" class="mb-20">
        <el-card class="review-card" :body-style="{ padding: '0px' }">
          <div class="card-content">
            <div class="image-section">
              <image-preview :src="item.coverImage" :width="120" :height="80"/>
            </div>
            <div class="info-section">
              <div class="title">{{ item.title }}</div>
              <div class="category">栏目：{{ item.categoryName || '未知栏目' }}</div>
              <div class="meta-info">
                <span class="author">作者：{{ item.author }}</span>
                <span class="publish-time">发布日期：{{ parseTime(item.publishTime, '{y}-{m}-{d}') }}</span>
              </div>
              <div class="action-section">
                <el-button type="primary" size="small" @click="handleReview(item.articleId)">审核</el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
  </div>
</template>

<script setup name="Review">
import { listReview, updateReview } from "@/api/review/review.js"
import { listCategory } from "@/api/content/category.js"

const { proxy } = getCurrentInstance()

const reviewList = ref([])
const loading = ref(true)
const total = ref(0)
const categoryList = ref([])

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 12,
    status: '0' // 只查询待审核状态
  }
})

const { queryParams } = toRefs(data)

/** 查询资讯审核列表 */
function getList() {
  loading.value = true
  listReview(queryParams.value).then(response => {
    reviewList.value = response.rows
    total.value = response.total
    loading.value = false

    // 获取栏目信息
    getCategoryList()
  })
}

/** 获取栏目列表 */
function getCategoryList() {
  listCategory().then(response => {
    categoryList.value = response.data
    // 将栏目ID映射为栏目名称
    reviewList.value.forEach(item => {
      const category = categoryList.value.find(cat => cat.categoryId === item.categoryId)
      item.categoryName = category ? category.categoryName : '未知栏目'
    })
  })
}

/** 审核按钮操作 */
function handleReview(articleId) {
  // 使用完整路径跳转
  proxy.$router.push({
    path: '/reviewDetail',
    query: { articleId: articleId }
  })
}

getList()
</script>

<style scoped>
.review-card {
  margin-bottom: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}

.card-content {
  display: flex;
  padding: 15px;
}

.image-section {
  margin-right: 15px;
}

.info-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.category {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.meta-info {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}

.author, .publish-time {
  margin-bottom: 4px;
}

.action-section {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}

.mb-20 {
  margin-bottom: 20px;
}
</style>